<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>b</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <input v-model="searchQuery">
    <ul>
      <li v-for="product in filteredProducts">
        <div>{{product.name}}</div>
        <div>{{product.price}}</div>
      </li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  let vm = new Vue({
    el: '#demo',
    data() {
      return {
        searchQuery: '',
        products: [
          {
            name: 'Product 1',
            price: 100,
          },
          {
            name: 'Product 2',
            price: 200,
          },
          {
            name: 'zhansan',
            price: 300
          }
        ]
      }
    },

    computed: {
      filteredProducts() {
        return this.products.filter(p => {
          return p.name.includes(this.searchQuery)
        })
      }
    }
  })
</script>

</html>